<template>
  <div>
    <div>
      <van-cell-group>
        <van-field
          v-model="mobile"
          label="手机号"
          placeholder="请输入手机号"
          type="tel"
        />
      </van-cell-group>

      <SmsCode
        v-model="verifyCode"
        :mobile="mobile"
        label=""
        placeholder="输入验证码"
        @click="onClickSmsCode"
      />

      <Password
        v-model="form.password"
        label="新密码"
        placeholder="请输入新密码"
      />

      <Password
        v-model="form.password2"
        label="确认密码"
        placeholder="再次输入新密码"
      />

      <van-button type="primary" block @click.native="handleReset">
        确认重置密码
      </van-button>

      {{ verifyCode2 }}
    </div>
  </div>
</template>

<script>
import Password from '@/components/Field/Password'
import SmsCode from '@/components/Field/SmsCode'
import SmsMixin from '@/mixins/sms'

import { Toast } from 'vant'

export default {
  name: 'ResetPsw',
  components: { SmsCode, Password },
  directives: {},
  filters: {},
  mixins: [SmsMixin],
  props: {},

  data() {
    return {
      // mobile: '13912345678',
      // verifyCode: '',
      // verifyCode2: '',

      form: {
        password: '',
        password2: ''
      }
    }
  },
  computed: {},
  async created() {
    //
  },

  methods: {
    onClickSmsCode() {
      console.log('xxx,onClickSmsCode')
      this.sendSms()
    },

    handleReset() {
      console.log('xxx, click handleReset,')
      if (!this.mobile) {
        Toast('请输入手机号')
      } else if (!this.verifyCode) {
        Toast('请输入短信验证码')
      } else if (!this.form.password) {
        Toast('请输入新密码')
      } else if (this.form.password.length < 6) {
        Toast('新密码至少6位')
      } else if (this.form.password !== this.form.password2) {
        Toast('两次输入的新密码不一致')
      } else {
        const ret = this.$store.dispatch('user/resetPassword', {
          mobile: this.mobile,
          code: this.verifyCode,
          password: this.form.password
        })
        // console.log('xxx,checkPsw ', res)
        ret.then(res => {
          console.log('xxx,handleReset ', res)
          if (res) {
            this.$router.push('/login')
          }
        })
      }
    }
  }
}
</script>

<style type="text/css"></style>
